<template>
  <!-- 判断detail是否为空，为空是会报错的 -->
  <div class="item" v-if="detail">
    <img :src="detail.img" alt="">
    <div>
      <p>豆瓣评分：{{detail.score}}</p>
      <p>产地：{{detail.country}}</p>
      <p><span class="tag" v-for="(tag,index) in detail.tags.split(',')">{{tag}}</span></p>
      <p>{{detail.summary}}</p>
      <p>{{msg}}</p>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    //方法一：最原始的写法
    // msg () {
    //   return this.$store.state.detail.msg
    // },
    //方法2：使用映射函数，参数是对象方式
    // ...mapState({
    //   msg (state) {
    //     return state.detail.msg
    //   }
    // }),
    //方法3.使用映射函数，参数是数组
    ...mapState('detail', ['detail', 'msg'])
  },
  methods: {
    ...mapActions('detail', ['queryMovieDetail'])
  },
  created () {
    //this.queryMovieDetail(this.$route.query.id)
    //原始写法必须写上detail模块名称，否则会不知道找哪个模块的Actions，就不知道queryMovieDetail函数再哪里
    this.$store.dispatch('detail/queryMovieDetail', this.$route.query.id)
  }
}
</script>
